<template>
  <div class="page-article">
    <!-- title -->
    <div class="d-flex ai-center py-3 border-bottom">
      <router-link to="/" v-slot="{navigate}">
         <span @click="navigate" class="iconfont icon-Back mr-2"></span>
      </router-link>

      <strong class="flex-1 text-hidden text-blue">{{
        model.title
      }}</strong>
      <div class="text-grey1 fs-sm mr-4">
        {{ model.updatedAt | dateFormat }}
      </div>
    </div>
    <!-- body -->
    <div v-html="model.body" class="body p-3"></div>
    <!-- 相关文章推荐 -->
    <dl class="border-top p-2">
      <dt class="d-flex mb-2">
        <i class="iconfont icon-menu1"></i>
        <h2 class="text-blue fs-md">相关资讯</h2>
      </dt>
      <router-link  v-for="item in model.related" :key="item._id" :to="`/articles/${item._id}`" v-slot="{ navigate }">
        <dd @click="navigate" class="mb-2 text-hidden fs-sm">
          {{ item.title }}
        </dd>
      </router-link>
    </dl>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  name: 'vArticle',
  props: {
    id: { required: true }
  },
  filters: {
    dateFormat (val) {
      return dayjs(val).format('YYYY-MM-DD')
    }
  },
  data () {
    return {
      model: {
        title: '',
        updatedAt: ''
      }
    }
  },
  methods: {
    async fetchArticle () {
      const res = await this.$http.get(`/articles/${this.id}`)
      this.model = res.data
    }
  },
  created () {
    this.fetchArticle()
  }
}
</script>

<style lang="scss">
.page-article {
  .body {
    p {
      font-size: 1.0769rem
    }
    img {
      max-width: 100%;
      height: auto;
    }
    iframe {
      width: 100%;
      height: auto;
    }
  }
}

</style>
